<template>
	<view>
		<view class="top-nav">
			<cmd-nav-bar :fixed="true" @leftImageClick="leftImageClick" leftImage="/static/lqkb.png" leftImageStyle="width:218rpx;height:64rpx;margin-top: 34rpx;"  title="介绍"  font-color="#000"   background-color="linear-gradient(to right, rgb(243, 231, 219), rgb(247, 238,230))"></cmd-nav-bar>
		 
		</view>
		
		<view v-for="(item,index) in dataList" :key="index" class="mx-2 intro-bg ">
			<image class="bgimg" :src="item.coverImg"></image>
			<view class="page-body">
				<view class="d-flex">
					<view>
						<image class="plot-img" :src="item.bgImg"></image>
					</view>
					<view class="right-con">
						<text class="d-block text-white title">{{item.title}}</text>
						<text class="d-block text-white blues">更新至{{item.updateNum}}集</text>
					</view>
				</view>
				<view class="title-desc ml-5 mt-2">
					{{item.title}}简介
				</view>
				<view class="content mx-2 mt-3">
					{{item.intro}}
				</view>
			</view> 
		</view>
		
	   <view class="mx-2 mb-2" v-if="loadMoreStatus">
		   <o-divider dashed lineColor="lineBlue">没有更多数据了</o-divider>
	   </view>
	
		 
		<!-- <view class="mx-2 intro-bg ">
		 	<image class="bgimg" src="../../static/demo2_03.jpg"></image>
		 	<view class="page-body">
		 		<view class="d-flex">
		 			<view>
		 				<image class="plot-img" src="../../static/demo12.jpg"></image>
		 			</view>
		 			<view class="right-con">
		 				<text class="d-block text-white title">斗罗大路</text>
		 				<text class="d-block text-white blues">更新至108集</text>
		 			</view>
		 		</view>
		 		<view class="title-desc ml-5 mt-2">
		 			斗罗大陆剧集简介
		 		</view>
		 		<view class="content mx-2 mt-3">
		 			这里没有魔法，没有斗气，没有武术，却有武魂。唐门创立
		 			万年之后的斗罗大陆上，唐门式微。一代天骄横空出世，新
		 			一代史莱克七怪能否重振唐门，谱写一曲绝世唐门之
		 			歌？
		 		</view>
		 	</view> 
		 </view> -->
	
	 
		
	 
		
	</view>
</template>

<script>
	import { getPlotList } from "@/common/api/theater.js"
	 
	export default {
	  components: {
		 
		},
	    data() {
	        return {
				form:{
					pageNo:1,
					pageSize:10,
				},
				dataList:[],
				loadMoreStatus:false
				}
		},
		onLoad() {
				 
		},
		onShow() {
		  this.getPlotPageList()
		}, 
		onReachBottom() {
			this.form.pageNo = this.form.pageNo + 1 
			this.getPlotPageList()
		},
		methods: {
			getPlotPageList(){
				getPlotList(this.form).then(res => {
					 if(res.code == 200){ 
						// this.dataList = res.result.records
						if(res.result.records.length ==0){
							this.loadMoreStatus = true
						}
						 res.result.records.forEach(item => {
						 	this.dataList.push(item)
						 }) 
						 
					 }
				})
			}, 
			leftImageClick(){
			uni.navigateTo({
				url:"/pages/welfare/index"
			})	
			}
		}
				
	}
	
	
</script>

<style>
	.top-nav{margin-bottom: 160rpx;}
	.intro-bg{width: 700rpx;border: 1px dashed #BCBCBC;border-radius: 8px;margin-top: 20rpx;}
	.bgimg{width: 100%;height: 313rpx;}
	.page-body{margin-top:-260rpx;padding-bottom:20rpx;}
	.plot-img{width: 188rpx;height: 284rpx;    margin-left: 55rpx;}
	.right-con{margin-left: 30rpx;margin-top: 50rpx;z-index: 99;}
	.blues{margin-top: 20rpx;}
	.title{font-size: 36rpx;}
	.title-desc{font-size: 32rpx;font-family: PingFang SC;font-weight: 500;color: #333333;}
	.content{font-size: 28rpx;}
	
</style>